<script setup>

</script>

<template>
    <div class="message">
        <div class="message-left">
            <div class="contact-search">
                搜索框
            </div>
            <div class="contact-list">
                消息列表
            </div>
        </div>
        <div class="message-right">
            <div class="message-top">
                标题
            </div>
            <div class="message-middle">
                消息主体
            </div>
            <div class="message-footer">
                发送框
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.message {
    height: 100%;
    padding: 0;
    background-color: azure;
    display: flex;

    .message-left {
        width: 280px;
        height: 100%;
        background-color: darkgreen;
        display: flex;
        flex-direction: column;

        .contact-search {
            height: 56px;
            background-color: aqua;
        }

        .contact-list {
            flex: 1;
            background-color: bisque;
        }
    }

    .message-right {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;


        .message-top {
            height: 56px;
            background-color: orange;
        }

        .message-middle {
            flex: 1;
            background-color: #dedede;
        }

        .message-footer {
            height: 240px;
            background-color: dodgerblue;
        }
    }
}
</style>